/*
 * 新增产品
 * @Author: ljb 
 * @Date: 2017-11-27 15:23:58 
 * @Last Modified by: ljb
 * @Last Modified time: 2018-02-25 18:09:42
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-admin-product-create {
        min-height: 600px;
    }
    
</style>
<template>
<div class="v-admin-product-create">
    <Row type="flex" justify="start">
        <Col push="1">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">

                <!-- <Form-item label="产品名称" prop="name">
                    <Input type="text" v-model="formValidate.name" placeholder="请输入产品名称"></Input>
                </Form-item> -->

                <Form-item label="产品分类" prop="product_category_id">
                   <Select v-model="formValidate.product_category_id" clearable filterable placeholder="请选择产品分类">
                        <OptionGroup v-for="category in categories" :key="category.id" :label="category.name">
                            <Option v-for="sub_category in category.get_sub_categories" :value="sub_category.id + ''" :key="sub_category.id">{{ sub_category.name }}</Option>
                        </OptionGroup>
                    </Select>
                </Form-item>

                <Form-item label="主标题" prop="title">
                    <Input type="text" v-model="formValidate.title" placeholder="请输入产品主标题"></Input>
                </Form-item>

                <!-- <Form-item label="副标题" prop="sub_title">
                    <Input type="text" v-model="formValidate.sub_title" placeholder="请输入产品副标题"></Input>
                </Form-item> -->

                <Form-item label="产品型号" prop="model_number">
                    <Input type="text" v-model="formValidate.model_number" placeholder="请输入产品型号"></Input>
                </Form-item>

                <Form-item label="产品优先级" prop="sort">
                    <InputNumber :max="100" :min="1" v-model="formValidate.sort" placeholder="请输入产品优先级"></InputNumber>
                </Form-item>

                <Form-item label="关键字" prop="keywords ">
                    <Input type="text" v-model="formValidate.keywords " placeholder="请输入产品关键字"></Input>
                </Form-item>

                 <Form-item label="描述" prop="description">
                    <Input type="textarea" v-model="formValidate.description" placeholder="请输入产品描述"></Input>
                </Form-item>

                <Form-item label="缩略图" prop="thumb">
                    <Upload :before-upload="file=>fileChange(file,'thumb','image_info')"
                            :on-remove="file=>fileChange(file,'thumb','image_info')"
                            :multiple="false"
                            accept="image/jpg, image/jpeg, image/png"
                            action="//fake_upload_url/">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传图片</Button>
                        <div class="license-tip" slot="tip" v-if="image_info.name">{{ image_info.name }}</div>
                        <div class="license-tip" slot="tip" v-else>尽量选择正方形，图片格式为jpg、jpeg或png的图</div>
                    </Upload>
                </Form-item>

                <Form-item label="产品资料" prop="information">
                    <Upload :before-upload="file=>fileChange(file,'information','file_info')"
                            :on-remove="file=>fileChange(file,'information','file_info')"
                            :multiple="false"
                            action="//fake_upload_url/">
                        <Button type="ghost" icon="ios-cloud-upload-outline">上传资料</Button>
                        <div class="license-tip" slot="tip" v-if="file_info.name">{{ file_info.name }}</div>
                        <div class="license-tip" slot="tip" v-else>产品的资料，非必要</div>
                    </Upload>
                </Form-item>

                <Form-item label="产品规格" prop="specification">

                    <vueEditor  ref="editor_s"
                                :preview-width="886"
                                @change="getSpecificationContent"></vueEditor>
                    <!-- <vue-editor ref="editor_s"
                                :preview-width="886"
                                :class-name="class_name_2"
                                :request-url="request_url"
                                :open-upload-img="true"
                                @change="getSpecificationContent"></vue-editor> -->
                </Form-item>

                <Form-item label="产品详情" prop="detail">

                    <vueEditor  ref="editor_d"
                                :preview-width="886"
                                @change="getDetailContent"></vueEditor>
                    <!-- <vue-editor ref="editor_d"
                                :preview-width="886"
                                :class-name="class_name"
                                :request-url="request_url"
                                :open-upload-img="true"
                                @change="getDetailContent"></vue-editor> -->
                </Form-item>

                <Form-item>
                    <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
                </Form-item>

            </Form>
        </Col>
    </Row>
</div>
</template>

<script>

import API_LIST from 'src/API_LIST';

import { mapGetters } from 'vuex';

import {
    validateImage
} from 'src/validate';    //引入校验文件

import vueEditor from 'src/views/component/vue-ueditor';

// import vueEditor from 'src/views/component/vueEditor';

export default {
    name: 'product-create',

    props: ['categories'],

    data() {	
        return {

            // class_name : 'editor-create',

            // class_name_2 : 'editor-create2',

            // request_url : API_LIST.MULTI_UPLOAD_IMG,

            formValidate : {

                // name : '',

                product_category_id : '',

                title : '',

                // sub_title : '',

                model_number : '',

                specification : '',

                thumb: '',

                detail: '',

                information : '',

                keywords:'',
                 
                description :'',

                sort: 1
            },                  //新建产品时的表单

            ruleValidate: {
                // name: [
                //     { required: true, message: '产品名称不能为空', trigger: 'blur,change' }
                // ],
                product_category_id: [
                    { required: true, message: '产品类别不能为空', trigger: 'blur,change' },
                ],
                title: [
                    { required: true, message: '产品主标题不能为空', trigger: 'blur,change' },
                ],
                // sub_title: [
                //     { required: true, message: '产品副标题不能为空', trigger: 'blur,change' },
                // ],
                model_number: [
                    { required: true, message: '产品型号不能为空', trigger: 'blur,change' },
                ],
                specification: [
                    { required: true, message: '产品规格不能为空', trigger: 'blur,change' },
                ],
                thumb: [
                    { required: true, validator: validateImage, trigger: 'blur,change'},
                ],
                information: [],
                detail: [
                    { required: true, message: '产品详情不能为空', trigger: 'blur,change' },
                ],
                sort: [
                    { required: true, type: 'number',  message: '产品优先级不能为空', trigger: 'blur,change' },
                ],
            },

            file_info : {
                name: '',
                url: ''
            },

            // 上传的图片信息
            image_info : {
                name: '',
                url: ''         //这个地方可以 base64 编码的图片，然后给 modal 框去显示图片
            }
        }
    },
    components: {
        vueEditor
    },
    methods: {

        /**
         * file类型input改变
         * @param  {Object} file {选择的文件对象}
         * @return {Boolean} {false则会停止上传}
         */
        fileChange(file,param,info){

            this[info].name = file.name;

            this.formValidate[param] = file;

            return false;

        },

        /**
         * 富文本内容改变时触发的回调
         * @param  {string} content {产品规格的内容}
         * @return {undefined}
         */
        getSpecificationContent(content){

            this.formValidate.specification = content;

        },

        /**
         * 富文本内容改变时触发的回调
         * @param  {string} content {产品详情的内容}
         * @return {undefined}
         */
        getDetailContent(content){

            this.formValidate.detail = content;

        },

        /**
         * 提交表单
         * @param  {string} name {表单的ref}
         * @return {undefined}
         */
        handleSubmit (name) {
            this.$refs[name].validate((valid) => {
                if (valid) {

                    this.$emit('post',this.formDataCreate());

                } else {

                    this.$Message.error('存在未填写的条目!');

                }
            })
        },

        /**
         * 重置表单
         * @param  {string} name {表单的ref}
         * @return {undefined} 
         */
        handleReset (name) {

            this.$refs[name].resetFields();

            this.formValidate.thumb = '';

            this.formValidate.information = '';

            this.image_info.name = '';

            this.file_info.name = '';

            this.formValidate.detail = '';

            this.formValidate.specification = '';

            this.$refs.editor_s.clearContent();

            this.$refs.editor_d.clearContent();

        },

        /**
         * 手动拼接formdata数据
         * @return {Object} {拼接好的formdata数据}
         */
        formDataCreate(){

            const new_object = {

                // name : this.formValidate.name,

                product_category_id : this.formValidate.product_category_id,

                title : this.formValidate.title,

                // sub_title : this.formValidate.sub_title,

                model_number : this.formValidate.model_number,

                thumb: this.formValidate.thumb,

                specification: this.formValidate.specification,

                detail: this.formValidate.detail,

                information: this.formValidate.information,

                sort: this.formValidate.sort,

                keywords: this.formValidate.keywords,
                
                description: this.formValidate.description,
            };

            let form_data = new FormData();

            Object.keys(new_object).forEach((key)=>{

                if( !new_object[key] )return;

                form_data.append( key , new_object[key] );
        
            });

            return form_data;

        }
        
    }
}
</script>